<template>
  <div class="data_line" id="data_line">
    <div class="myChartLine" id="myChartLine"></div>
  </div>
</template>

<script setup>
import {reactive, onMounted, ref} from 'vue'
import * as echarts from 'echarts';
const myChart = ref()

onMounted(() => {
  initData()
})
const chartConfig = ref({
  title: {
    text: ''
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross'
    }
  },
  legend: {
    data: ['新增访客数', '新增评论数', '新增开口数', '新增客资数', '开口率', '客资转化率'],
    orient: "horizontal",
    bottom: 0,
    left: 50
  },
  grid: {
    top: "3%",
    left: '3%',
    right: '3%',
    bottom: '10%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['2024/07/01', '2024/07/02', '2024/07/03', '2024/07/04', '2024/07/05'],
    axisLabel: {
      rotate:- 45
    }
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '新增访客数',
      type: 'line',
      stack: 'Total',
      data: [0, 0, 0, 0, 0, 0, 0]
    },
    {
      name: '新增评论数',
      type: 'line',
      stack: 'Total',
      data: [0, 0, 0, 0, 0, 0, 0]
    },
    {
      name: '新增开口数',
      type: 'line',
      stack: 'Total',
      data: [0, 0, 0, 0, 0, 0, 0]
    },
    {
      name: '新增客资数',
      type: 'line',
      stack: 'Total',
      data: [0, 0, 0, 0, 0, 0, 0]
    },
    {
      name: '开口率',
      type: 'line',
      stack: 'Total',
      data: [0, 2, 8, 0, 5, 0, 0]
    },
    {
      name: '客资转化率',
      type: 'line',
      stack: 'Total',
      data: [1, 10, 2, 4, 0, 0, 0]
    }
  ]
})
const initData = () => {
  myChart.value = echarts.init(document.getElementById("myChartLine"))
  myChart.value.setOption(chartConfig.value)
}

</script>

<style scoped lang="scss">
.myChartLine {
  width: 100%;
  height: 400px;
  margin-bottom: 20px;
}
</style>